<template>
  <div id="app">
    <div>VUE2_VUEX_TEXT</div>
    <span>测试使用默认方式获取和修改countStore的数据</span>
    <span>获取sum的值{{ sum }}</span>
    <div>
      <!-- <button @click="add">sum++</button> -->
      <button @click="add(3)">用mapActions实现sum+3</button>
      <button @click="ADD(10)">用mapMutations(越过dispatch)实现sum+10</button>
    </div>

    <div>
      以下内容来自TestStoreModules组件
      <TestSotreModules />
    </div>
  </div>
</template>

<script>
import TestSotreModules from "./components/TestSotreModules.vue";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  name: "App",
  components: {
    TestSotreModules,
  },
  // 使用mapState辅助函数将user模块的状态映射到组件的计算属性
  computed: {
    // 手写方式
    // sum() {
    //   return this.$store.state.sum;
    // },
    ...mapState(["sum"]),
  },
  methods: {
    // 手写形式
    // add() {
    //   this.$store.dispatch("add", 2);
    // },
    // 使用mapAcitons方法
    ...mapActions({ add: "add" }), //页面使用方法 传参则是add(n)
    // 越过dispatch 直接commit
    ...mapMutations({ ADD: "ADD" }),
  },
  mounted() {
    console.log(this);
  },
};
</script>

<style>
</style>
